<template>
  <div id="search">
    <div class="input">
      <form action="/"
            class="input_show">
        <van-search v-model="value"
                    show-action
                    placeholder="咬人猫可爱翻跳《与梦盛开》"
                    @search="onSearch">
          <template #action>
            <span style="color:red;"
                  @click="onCancel">取消</span>
          </template>
        </van-search>
        <div class="nowsearch"
             v-show="isShow">
          <div v-for="item in nowsearch"
               :key="item"
               class="nowsearch_item"
               @click="handleSelect(item.name)">
            {{item.name}}
          </div>
        </div>
      </form>
    </div>
    <div class="pepolesearch">
      <p class="first_p">大家都在搜</p>
    </div>
    <p style="height:10px;background-color:#ccc;"></p>
    <div class="historysearch">
      <div class="hist">
        <span>历史搜索：</span>
        <p v-for="data in valuedatas"
           :key="data">{{data}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  data: () => ({
    value: '',
    valuedatas: [],
    nowsearch: [],
    isShow: true
  }),
  methods: {
    async onSearch () {
      this.valuedatas.push(this.value)
      Toast(this.value + '----搜索成功')
      const res = await this.$http.search(this.value)
      this.nowsearch = res.data.data.splice(0, 6)
      // search搜索
      setTimeout(() => {
        this.$router.push('/play')
      }, 2000)
    },
    onCancel () {
      this.$router.push('/home')
    },
    handleSelect (name) {
      this.value = name
      this.isShow = !this.isShow
    }
  },
  async created () {
    // const res = await this.$http.search(this.value)
    // console.log(res.data)
  }
}

</script>
<style lang="scss" scoped>
#search {
  .input {
    .input_show {
      position: relative;
      .nowsearch {
        position: absolute;
        top: 12vw;
        left: 3vw;
        text-indent: 2vw;
        background: #fff;
        width: 80vw;
        color: #999;
        .nowsearch_item {
          padding: 2vw 0;
        }
      }
    }
  }
  .historysearch {
    font-size: 14px;
    color: #999;
    height: 126px;
    .hist {
      text-indent: 10px;
      margin-top: 15px;
    }
  }
  .pepolesearch {
    font-size: 14px;
    color: #999;
    height: 126px;
    .first_p {
      text-indent: 10px;
      margin-top: 7px;
    }
  }
}
</style>
